<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-content {
		height: 730px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
		overflow: scroll;
	}
	
	.layout-menu-left {
		font-weight: 600;
	}
</style>
<template>
	<div>
		<div class="layout ">
			<Row type="flex">
				<Col class="layout-menu-left" :span="spanLeft">
				<br>
				<Tree :data="data1" @on-select-change='onSelect'></Tree>
				<br>
				<Col span="20" offset='4'>
				<Button type="success" @click="addNew">添加新的新闻</Button>
				</Col>
				</Col>
				<Col :span="spanRight">
				<div class="layout-content">
					<Table border :columns="columns7" :data="fliter.list"></Table>
				</div>
				</Col>
			</Row>
		</div>
		<Modal v-model="modal6" title="添加新的新闻" @on-ok="asyncOK">
			<Form :model="formLeft" label-position="left" :label-width="100">
				<FormItem label="标题">
					<Input v-model="formLeft.text"></Input>
				</FormItem>
			</Form>
		</Modal>

		<Modal v-model="modal5" title="修改新闻内容" @on-ok="okok" width="80%">
			<Form :model="formItem" :label-width="80" style="width:95%">
				<FormItem label="标题">
					<Input v-model="formItem.text" placeholder="请输入"></Input>
				</FormItem>
				<FormItem label="主题">
					<Input v-model="formItem.title" placeholder="请输入"></Input>
				</FormItem>
				<FormItem label="文本域">
					<quill-editor ref="myQuillEditor" v-model="formItem.content">
					</quill-editor>

				</FormItem>
				<Button type="success" @click="showImg" style="margin-left: 50px;">点击查看图片</Button>
			</Form>
		</Modal>

		<Modal v-model="modal3" title="新闻图片查询" width="80%">
			<Row>
				<Col span="6">
				<Tree :data="data1" @on-select-change='onSelect1'></Tree>
				</Col>
				<Col span='18'>
				<div class="demo-upload-list" v-for="item in paths" style="width: 150px;height: 150px;float: left;overflow: hidden;">
					<img :src="item" style="width: 100%;">
				</div>
				</Col>
			</Row>
		</Modal>
	</div>
</template>
<script>
	import Coment from './coment.vue'

	export default {

		data() {
			return {
				pId: '',
				spanLeft: 4,
				spanRight: 19,
				data1: [],
				modal6: false,
				modal5: false,
				modal3: false,
				models1: 'news',
				models2: 'news',
				catetype: '',
				paths: [],
				tabs: ["新闻首页"],
				addContent: {},
				updataid: '',
				formItem: {
					text: '',
					title: '',
					content: '',
				},
				formLeft: {
					text: '',
				},
				columns7: [{
						title: '标题',
						key: 'text'
					},
					{
						title: '主题',
						key: 'title'
					},
					{
						title: '操作',
						key: 'action',
						width: 225,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除'),
								h('Button', {
									props: {
										type: 'success',
										size: 'small'
									},
									on: {
										click: () => {
											this.commit(params.index)
										}
									}
								}, '评论')
							]);
						}
					}
				],
				ids: [],
				modal1: false,
				fliter: {
					list: [],
				}
			}
		},
		computed: {
			iconSize() {
				return this.spanLeft === 5 ? 14 : 24;
			}
		},
		methods: {
			toggleClick() {
				if(this.spanLeft === 5) {
					this.spanLeft = 2;
					this.spanRight = 22;
				} else {
					this.spanLeft = 5;
					this.spanRight = 19;
				}
			},

			showImg() {
				this.modal3 = true;
				this.geuImg()
			},
			geuImg() {
				this.paths = []
				this.$http.get('http://localhost:3000/upload/list').then(res => {

					let ll = res.data.length
					let enen = ''
					for(let i = 0; i < ll; i++) {
						enen = 'http://localhost:3000/' + res.data[i].filename
						this.paths.push(enen)
					}
				})
			},
			onSelect1(rows) {
				this.paths = []
				this.$http.get('http://localhost:3000/upload/list').then(res => {

					let ll = res.data.length
					let enen = ''
					for(let i = 0; i < ll; i++) {
						if(rows[0].id == res.data[i].cateId) {
							enen = 'http://localhost:3000/' + res.data[i].filename
							this.paths.push(enen)
						}
					}
				})

			},
			onSelect(rows) {
				this.fliter.list=[];
				this.addContent = rows
				var iii = true
				var iiii = []
				this.$http.get('http://localhost:3000/news/data').then(res => {
					let ii = res.data.length
					for(let i=0;i<ii;i++){
						if(res.data[i].cateId==rows[0].id){
							iii=false
						}
						if(res.data[i]._id==rows[0].id){
							iiii=res.data[i]
						}
					}
					if(!iii){
						this.AtreeRecursion(res, rows[0].id)
					}else{
						console.log(iiii)
						this.fliter.list.push(iiii)
					}
					
				})
				

			},
			//树加载初始
			typeNumber() {
				this.$http.get('http://localhost:3000/news/data').then(res => {
					let ll = res.data.length
					const arr = []
					for(let i = 0; i < ll; i++) {
						if(this.catetype) {
							if(res.data[i].type == this.catetype) {
								arr.push(res.data[i])
							}
						} else {
							arr.push(res.data[i])
						}
					}
					for(let i = 0; i < arr.length; i++) {

						if(!arr[i].cateId) {
							this.pId = arr[i]._id
							let obj = {
								title: arr[i].text,
								expand: true,
								id: arr[i]._id,
								children: [],
							}
							this.data1.push(obj)
						}
					}

					this.sTree(arr, this.data1[0].children, this.pId)

				})
			},
			okok() {
				setTimeout(() => {
					this.$http.put('http://localhost:3000/news/data/'+this.updataid, this.formItem)
						.then(res => {
							this.fliter.list = []
							this.getData()

							this.data1 = []
							this.typeNumber()
						})
					this.$Modal.remove();
				}, 1000);

			},
			asyncOK() {
				this.formLeft.cateId = this.addContent[0].id
				this.$http.post('http://localhost:3000/news/data', this.formLeft)
					.then(res => {
						this.fliter.list = []
						this.getData()
						this.data1 = []
						this.typeNumber()
					})
			},

			addNew() {
				if(this.addContent[0]) {
					if(this.addContent[0].children) {
						this.modal6 = true

					} else {
						this.$Message.error('对方不想说话，默默的看你选择正确的文件夹');
					}
				} else {
					this.$Message.error('对方不想说话，默默的看你选择正确的文件夹');
				}
			},
			show(index) {
				Object.assign(this.$data.formItem, this.fliter.list[index])
				this.fliter.list[index]
				this.modal5 = true
				this.updataid = this.fliter.list[index]._id
			},
			commit(index){
				this.$router.push({path: '/coment',query:this.fliter.list[index]});
			},
			remove(index) {
				this.$Modal.confirm({
					title: '确认删除数据吗',
					content: '删除后这些数据将无法找回',
					loading: true,
					onOk: () => {
						console.log(this.fliter.list[index]._id)
						setTimeout(() => {
							this.$http.delete('http://localhost:3000/news/data/'+this.fliter.list[index]._id)
								.then(res => {
									this.fliter.list = []
									this.getData()

									this.data1 = []
									this.typeNumber()
								})
							this.$Modal.remove();
						}, 1000);
					}
				});
			},
			//树加载递归
			sTree(rows, tchild, pId) {
				var arrArea = [];
				let len = rows.length
				for(let i = 0; i < len; i++) {
					var arrFlag = true;
					var arrPid = '';
					if(rows[i].cateId == pId) {
						let obj = {
							title: rows[i].text,
							expand: true,
							id: rows[i]._id,
							children: [],
						}
						tchild.push(obj)
						arrArea.push(1)
						for(let j = 0; j < len; j++) {
							if(rows[i]._id == rows[j].cateId) {
								arrFlag = false;
								arrPid = rows[i]._id
							}
						}
					}
					if(!arrFlag) {
						this.sTree(rows, tchild[arrArea.length - 1].children, arrPid)
						arrFlag = true;
					}
				}
			},

			getData() {
				this.$http.get('http://localhost:3000/news/data')
					.then(res => {
						let yy = res.data.length
						for(let i = 0; i < yy; i++) {
							if(!res.data[i].cateId) {
								this.AtreeRecursion(res, res.data[i]._id)
							}
						}
					})
			},
			AtreeRecursion(rows, pId) {
				let len = rows.data.length
				for(let i = 0; i < len; i++) {
					var arrFlag = true;
					if(rows.data[i].cateId) {
						if(rows.data[i].cateId == pId) {

							for(let j = 0; j < len; j++) {

								if(rows.data[i]._id == rows.data[j].cateId) {
									arrFlag = false
								}
							}

							if(!arrFlag) {
								this.AtreeRecursion(rows, rows.data[i]._id)

							} else {

								this.fliter.list.push(rows.data[i])
							}
						}

					}
				}
			},
		},
		components: {
			Coment,
		},
		created() {
			this.getData()
			this.typeNumber()
		}
	}
</script>